<template>
  <div style="width: 100%">
    <el-drawer v-model="drawer" title="详情" :with-header="false" size="80%">
      <div style="font-size: 15px">
        <el-descriptions
          class="margin-top"
          :title="titleUtil.title(content.title)"
          :column="3"
          size="small"
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <User />
                </el-icon>
                作者
              </div>
            </template>
            {{ content.author }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <iphone />
                </el-icon>
                提交时间
              </div>
            </template>
            {{ titleUtil.formatDateToYYYYMMDD(content.createTime) }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <location />
                </el-icon>
                标签
              </div>
            </template>
            <el-tag
              size="small"
              v-for="(tag, index) of titleUtil.stringSplitToArr(content.tagsId)"
              :key="index"
              class="tag-item"
              type="success"
            >
              {{ tag }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets />
                </el-icon>
                分类
              </div>
            </template>
            <el-tag size="small">{{ content.typeName }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <office-building />
                </el-icon>
                描述
              </div>
            </template>
            {{ content.description }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div v-html="output" class="mark"></div>
    </el-drawer>
  </div>

</template>

<script setup>
import { marked } from 'marked'
import { computed, ref } from 'vue'
import titleUtil from '@/util/titleUtil'

const content = ref({})

const drawer = ref(false)


const output = computed(() => marked.parse(content.value.content))

const open = (item) => {
  drawer.value = true
  content.value = item
}

defineExpose({
  open
})
</script>

<style scoped>
/* 宽度 */
::-webkit-scrollbar {
  width: 10px;
}

/* 跟踪 */
::-webkit-scrollbar-track {
  background: #fff;
}

/* 句柄 */
::-webkit-scrollbar-thumb {
  background: #5f5f5f;
}

/* 悬停处理 */
::-webkit-scrollbar-thumb:hover {
  background: #000;
}

.mark {
  padding: 10px;
  font-size: 18px;
  margin-top: 50px;
}

.tag-item {
  padding: 2px 15px;
  margin-right: 10px;
}
</style>
